<template>
	<view class="content">
		<video v-if="video" :src="video" :controls="false" autoplay page-gesture :custom-cache='false'
			@ended="setConfiguration"></video>
			<view style="padding: calc(60vmin / 7.5) 0;" v-else>
				<gameBasics backgroundColor="rgba(0,0,0,0)" />
					<view class="bg">
					
					</view>
					<fireworks/> 
					<view class="title">
						<view class="">
							恭喜您的队伍完成挑战，成为表现卓越的队伍
						</view>
				
						<view class="">
							根据队员的表现，为队员们授予勋章吧
						</view>
					</view>
				
					<scroll-view v-if="userPeople.cap_zt==2" scroll-x show-scrollbar style="width: 80vw;margin: 0 auto;white-space: nowrap;vertical-align: top;">
						<view class="team_item" v-for="(item ,index) in people" @click="setAchievement(index)">
							<view class="">
								<image :src="item.user_pic" mode="aspectFill"></image>
								<view class="" style="overflow: hidden;text-overflow: ellipsis;white-space: normalp;">
									{{item.user_name}}
								</view>
							</view>
							<view class="medal">
								<image v-for="(item ,index) in item.bagesList" :src="item.pic" mode="aspectFill"></image>
							</view>
				
						</view>
					</scroll-view>
				
				  <view class="btn" @click="goOver">
				  	查看战绩
				  </view>
				
					<u-popup :show="setAchievementShow" mode="center" :round="10" closeable @close="close">
						<view class="achievementList">
				<!-- 			<view  v-for="(item ,index) in achievementList" @click="change(index)">
								<image src="/static/honor.png" mode=""></image>
								<view class="text">
									{{item.title}}
								</view>
							</view> -->
							<image :src="item.pic" :class="Xindex==index?'active image':'image'"
								v-for="(item ,index) in achievementList" mode="aspectFill" @click="change(index)"></image>
						</view>
						<view class="" style="display: flex;flex-direction: row-reverse;padding-right: calc(20vmin / 7.5);">
							<view class="game_btn" style="margin: 0;" @click="submit">
								<view class="">
				
								</view>
								确定
							</view>
						</view>
				
					</u-popup>
			</view>
<gameLoading/>
	</view>
</template>

<script>	
	import fireworks from '@/components/sanshui-fireworks/sanshui-fireworks.vue'
	export default {
		components: {
			fireworks
		},
		data() {
			return {
				setAchievementShow: false,
				achievementList: [],
				user_id: '',
				teamList:[],
				compareTeamList:[],
				teamIndex:-1,
				gameData: {},
				userPeople: {},
				people:[],
				video:'',
				bages:[],
				Xindex:-1,
				acceptStatus:true
			}
		},
		onLoad() {
	
			this.$myRuquest('home/game/badges_list').then(res => {
				res.list.forEach(item => {
					item.disabled = false
				})
				this.achievementList = res.list
			})
		},
		onUnload() {
			this.acceptStatus = false
		},
		watch:{
			bages(){
				this.people.forEach(item=>{
					this.bages.forEach(items=>{
						if(items.user_id==item.user_id){
							item.bagesList=items.list
						}
					})
				})
				this.$forceUpdate()
			}
		},

		mounted() {
	
			uni.$on('onMessage',(res)=>{
          if(!this.acceptStatus) return;
					this.$nextTick(()=>{
						this.$store.commit('switchGame', {
							code: false
						})
					})
				this.bages=res.data.bages
				this.gameData = res.data.game
				this.userPeople = res.data.userPeople
				this.teamList=res.data.team
				
				this.video = uni.getStorageSync("video")
				this.people=this.teamList.filter(item=>item.id==this.userPeople.teamId)[0].people
				this.people.forEach(item=>{
					item.achievementList=[]
				})


				if(this.video) return;
				if (this.userPeople.cap_zt == 1) {
					uni.redirectTo({
						url: '/pages/gameTemplate/awaitFinish'
					}) 
					this.acceptStatus = false
				}
			
			})
			let game_id = uni.getStorageSync("gameId")
			let userData = uni.getStorageSync("userData")		
						if(!this.$ws.socketTask) return this.$ws.init();
			this.$ws.socketTask.send({
				data: JSON.stringify({
				game_id,
				user_id: userData.id
			}),
				async success() {
					console.log("消息发送成功")
				}
			});
		},
		methods: {
		setConfiguration(){
			this.video=''
			uni.setStorageSync('video', '');
			if (this.userPeople.cap_zt != 2) {
				uni.navigateTo({
					url: '/pages/gameTemplate/awaitFinish'
				})
			}
		},
			goOver(){
				uni.redirectTo({
					url:'./over/over'
				})
			},
			close() {
				this.setAchievementShow = false
			},
			setAchievement(index) {
				this.teamIndex=index
				this.user_id=this.people[index].user_id
				this.setAchievementShow = true
			},
			change(index) {
				this.Xindex=index
				// this.achievementList[index].disabled = !this.achievementList[index].disabled
			},

			submit() {
				// let bages_id = []
				// this.achievementList.forEach(item => {
				// 	if (item.disabled) bages_id.push(item.id)
				// })
				if(this.Xindex==-1) return;
				let bages_id =this.achievementList[this.Xindex].id
				let data_ = [{
					user_id: this.user_id,
					bages_id
				}]
				let data = {
					game_id: this.gameData.id,
					team_id: this.userPeople.teamId,
					data: JSON.stringify(data_)
				}
				this.$myRuquestWs('home/game/game_bages', data).then(res => {
					this.setAchievementShow = false
				})

				console.log(data)

			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// padding: calc(60vmin / 7.5) 0;
	}

	.title {
		text-align: center;
		color: #FF5A5A;
		font-size: calc(46vmin / 7.5);

		>view:nth-child(2) {
			font-size: calc(28vmin / 7.5);
			color: #999999;
			margin-top: calc(20vmin / 7.5);
		}
	}



	.team_item {
		display: inline-block;
		text-align: center;
		font-size: calc(26vmin / 7.5);
		color: #333;
		margin-top: calc(40vmin / 7.5);

		width: calc(160vmin / 7.5);

		image {
			width: calc(100vmin / 7.5);
			height: calc(100vmin / 7.5);
			border-radius: calc(12vmin / 7.5);
			margin: 0 auto;
		}
		.medal{
			margin-top: calc(10vmin / 7.5);
			display: flex;
			flex-direction: column;
			image{
				width: calc(70vmin / 7.5);
				height: calc(70vmin / 7.5);
			}
		}
	}


	.achievementList {
		width: calc(80vw - calc(120vmin / 7.5));
		height: calc(80vh - calc(240vmin / 7.5));
		display: flex;
		flex-wrap: wrap;
		padding: calc(20vmin / 7.5) calc(60vmin / 7.5);
		overflow: scroll;

		image {
			width: calc(180vmin / 7.5);
			height: calc(180vmin / 7.5);
			margin: calc(12vmin / 7.5);
			border: calc(4vmin / 7.5) solid rgba(0, 0, 0, 0);
		}

		.active {
			border: calc(4vmin / 7.5) solid #F9CC68;
			border-radius: calc(14vmin / 7.5);
		}
	}
	
	.bg {
		margin: 0;
		padding: 0;
		min-height: 100vh;
		width: 100vw;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	
		background-color: rgba(249, 204, 104, .8);
		overflow: hidden;
	}
	
	.bg::before,
	.bg::after {
		content: '';
		position: absolute;
		bottom: 15vh;
		min-width: 300vw;
		min-height: 300vw;
		background-color: #fff;
		animation: rote 10s linear infinite;
	}
	
	.bg::before {
		left: -95%;
		border-radius: 45%;
		opacity: .5;
	}
	
	.bg::after {
		left: -95%;
		border-radius: 46%;
	}
	
	@keyframes rote {
		from {
			transform: rotateZ(0);
		}
	
		to {
			transform: rotateZ(360deg);
		}
	}
	.btn{
		width: calc(200vmin / 7.5);
		height: calc(66vmin / 7.5);
		background-color: #000000;
		font-size: calc(32vmin / 7.5);
		color: #FFFFFF;
		line-height: calc(66vmin / 7.5);
		text-align: center;
		border-radius: calc(66vmin / 7.5);
		position: absolute;
		bottom: calc(20vmin / 7.5);
		right: calc(20vmin / 7.5);
		
	}
	.image {
		width: calc(200vmin / 7.5);
		height: calc(200vmin / 7.5);
		position: relative;
		margin: calc(28vmin / 7.5) 0;
	
		image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	
		.text {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			font-size: calc(16vmin / 7.5);
			color: #D4B683;
		}
	}
	video {
		width: 100vw;
		height: 100vh;
	}
</style>
